import { View, Text, Image } from "@tarojs/components";
import ico_add_two from "@/assets/image/ico_add_two.svg";
import ico_chak from "@/assets/image/ico_chak.svg";
import ico_edt_two from "@/assets/image/ico_edt_two.svg";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import "./index.scss";
import { linkWithParams } from "@/helper/utils";
import { routes } from "@/constants/routes";
import { classifyDelete, classifyList } from "@/services/entities/all";
import { useState } from "react";
import { useDidShow } from "@tarojs/taro";
import clsx from "clsx";
import Taro from "@tarojs/taro";
const TypeManagePage = () => {
  const [list, setList] = useState<any>([]);

  const init = () => {
    classifyList({}).then((res: any) => {
      setList(res);
    });
  };

  const deleteClassify = (id: string) => {
    Taro.showModal({
      title: "提示",
      content: "是否删除当前类型",
      success: (res) => {
        if (res.confirm) {
          classifyDelete({ id }).then(() => {
            init();
          });
        }
      },
    });
  };

  useDidShow(() => {
    init();
  });

  return (
    <View className="type-manage-container pb-100 border-box bg-page bg-394B5D">
      {list?.map((item, index) => {
        return (
          <View
            className="flex-column mt-16 pd-lr-16 pd-tb-32 border-box bg-ffffff br-16"
            key={item.id}
          >
            <View className="dis-flex align-center">
              <View className="flex-1 dis-flex align-center">
                <View className="bg-007DDB flex-center pd-lr-12 br-8 border-box fs-28 lh-34 cl-white">
                  {index + 1}
                </View>
                <Text className="ml-22 fs-30 lh-40 cl-black">{item.name}</Text>
              </View>
              <View
                className="dis-flex align-center"
                onClick={() => {
                  linkWithParams(routes.ROUTES_ADD_TYPE, {
                    type: 2,
                    isEdit: false,
                    parentId: item.id,
                  });
                }}
              >
                <Image src={ico_add_two} className="img-36" />
                <Text className="ml-8 fs-24 lh-34 cl-007DDB">新增子类</Text>
              </View>
            </View>
            <View className="child bg-F0F1F2 br-8 mt-32">
              {item.list.map((child, idx) => {
                return (
                  <View
                    key={child.name}
                    className={clsx(
                      "dis-flex align-center pd-lr-12 pd-tb-24 border-box",
                      idx < item.list.length - 1 ? "bottom-border" : ""
                    )}
                  >
                    <View className="flex-1 dis-flex align-center">
                      <View className="bg-5D9AC9 br-8 pd-lr-12 fs-24 lh-36 border-box cl-white">
                        {`${index + 1}-${idx + 1}`}
                      </View>
                      <Text className="ml-24 fs-28 lh-38 cl-black">
                        {child.name}
                      </Text>
                    </View>
                    <View className="dis-flex align-center gap-36">
                      <View
                        className="dis-flex align-center"
                        onClick={() => {
                          linkWithParams(routes.ROUTES_ADD_TYPE, {
                            type: "2",
                            status: "3",
                            id: child.id,
                            parentId: item.id,
                          });
                        }}
                      >
                        <Image src={ico_chak} className="img-36" />
                        <Text className="fs-24 lh-34 cl-black ml-8">查看</Text>
                      </View>
                      <View
                        className="dis-flex align-center"
                        onClick={() => {
                          linkWithParams(routes.ROUTES_ADD_TYPE, {
                            type: "2",
                            status: "2",
                            id: child.id,
                            parentId: item.id,
                          });
                        }}
                      >
                        <Image src={ico_edt_two} className="img-36" />
                        <Text className="fs-24 lh-34 cl-black ml-8">编辑</Text>
                      </View>
                      <View
                        className="dis-flex align-center"
                        onClick={() => {
                          deleteClassify(child.id, index, idx);
                        }}
                      >
                        <Image src={ico_del_two} className="img-36" />
                        <Text className="fs-24 lh-34 cl-E14848 ml-8">删除</Text>
                      </View>
                    </View>
                  </View>
                );
              })}
            </View>
            <View className="dis-flex align-center justify-evenly mt-32">
              <View className="dis-flex align-center">
                <Image src={ico_chak} className="img-36" />
                <Text
                  className="fs-24 lh-34 cl-black ml-8"
                  onClick={() => {
                    linkWithParams(routes.ROUTES_ADD_TYPE, {
                      type: "1",
                      status: "3",
                      id: item.id,
                    });
                  }}
                >
                  查看
                </Text>
              </View>
              <View
                className="dis-flex align-center"
                onClick={() => {
                  linkWithParams(routes.ROUTES_ADD_TYPE, {
                    type: "1",
                    status: "2",
                    id: item.id,
                  });
                }}
              >
                <Image src={ico_edt_two} className="img-36" />
                <Text className="fs-24 lh-34 cl-black ml-8">编辑</Text>
              </View>
              <View
                className="dis-flex align-center"
                onClick={() => {
                  deleteClassify(item.id, index);
                }}
              >
                <Image src={ico_del_two} className="img-36" />
                <Text className="fs-24 lh-34 cl-E14848 ml-8">删除</Text>
              </View>
            </View>
          </View>
        );
      })}
      <View
        className="bottom flex-center pb-30 border-box"
        onClick={() => {
          linkWithParams(routes.ROUTES_ADD_TYPE, {
            type: "1",
            status: "1",
          });
        }}
      >
        <View className="bottom-btn flex-center pd-tb-20 border-box fs-28 lh-38 cl-white bg-007DDB br-8">
          新增大类
        </View>
      </View>
    </View>
  );
};

export default TypeManagePage;
